<template>
  <div :class="name">
    <Dropdown trigger="click" @on-click="setTheme">
    <!-- <a href="javascript:void(0)">
        <Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" size="30"
              type="ios-color-fill"></Icon>
        <Icon type="arrow-down-b"></Icon>
      </a> -->
      <DropdownMenu>
        <DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.name">
          <Row type="flex" justify="center" align="middle">
            <span style="margin-right:10px; display: block;" class="fl">
              <Icon :size="20" :type="item.name.slice(0, 4) !== 'dark' ? 'ios-happy-outline' : 'ios-happy'" :color="item.menu"/>
            </span>
            <span class="fl"><Icon :size="22" type="ios-square" :color="item.element" /></span>
            <span class="clr"></span>
          </Row>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script> 
  export default {
    data() {
      return {
        name: 'themeSwitch',
        themeList: [
          {
            name: 'dark_d',
            menu: '#000',
            element: '#000'
          },
          {
            name: 'dark_b',
            menu: '#2d8cf0',
            element: '#2d8cf0'
          },
          {
            name: 'dark_g',
            menu: '#00a854',
            element: '#00a854'
          },
          {
            name: 'dark_y',
            menu: '#ff9900',
            element: '#ff9900'
          },
          {
            name: 'dark_r',
            menu: '#66048e',
            element: '#66048e'
          },
          {
            name: 'light_d',
            menu: '#fff',
            element: '#fff'
          },
          {
            name: 'light_b',
            menu: '#495060',
            element: '#2d8cf0'
          },
          {
            name: 'light_g',
            menu: '#495060',
            element: '#00a854'
          },
          {
            name: 'light_y',
            menu: '#495060',
            element: '#e96500'
          },
          {
            name: 'lightr',
            menu: '#495060',
            element: '#e43e31'
          }
        ]
      };
    },
    methods: {
      setTheme(themeFile) {
        var localStorage = window.localStorage;
        let mainTheme = themeFile.slice(-1);
        let menuTheme = themeFile.slice(0, -2);
        if(menuTheme=="d"){
          menuTheme="dark";
        }
        if(menuTheme=="l"){
          menuTheme="light";
        }
        let themeLink = document.querySelector('link[name="theme"]');
        //let path = './src/components/theme/';
        let path = './static/theme/';
        //themeLink.setAttribute('href','./src/components/theme/darkb.css');
        if (localStorage.theme) {
          console.log(localStorage)
          localStorage.removeItem('theme');

          var theme = [
            {"mainTheme": mainTheme},
            {"menuTheme": menuTheme}
          ];
          theme = JSON.stringify(theme);
          localStorage.setItem("theme", theme);
          //var pathL = './src/components/theme/b.css';
          //themeLink.setAttribute('href', pathL);


          let stylesheetPath = path + menuTheme + mainTheme + '.css';
          themeLink.setAttribute('href', stylesheetPath);
          /*var link = document.createElement("link");
          link.className="theme"
          link.rel = "stylesheet";
          link.type = "text/css";
          link.href =stylesheetPath;
          document.getElementsByTagName("head")[0].appendChild(link);*/

        } else {
          var localStorage = window.localStorage
          var theme = [{"mainTheme": "b"}, {"menuTheme": "dark"}]
          theme = JSON.stringify(theme);
          localStorage.setItem("theme", theme);
        }
        //themeLink.setAttribute('href', path);
      }
    },
    created() {
      var localStorage = window.localStorage;
      if (localStorage.theme) {

        var job = JSON.parse(window.localStorage.theme);
        var changeMainTheme = job[0].mainTheme
        var changeMenuTheme = job[1].menuTheme
      } else {
        var theme = [{"mainTheme": "b"}, {"menuTheme": "dark"}]
        theme = JSON.stringify(theme);
        localStorage.setItem("theme", theme);
        var job = JSON.parse(window.localStorage.theme);
        var changeMainTheme = job[0].mainTheme
        var changeMenuTheme = job[1].menuTheme
      }
      // 根据用户设置主题
      console.log(changeMainTheme)
      console.log(changeMenuTheme)
      //let path = './src/components/theme/';
      let path = './static/theme/';
      let themeLink = document.querySelector('link[name="theme"]');

      let stylesheetPath = path + changeMenuTheme + changeMainTheme + '.css';

      themeLink.setAttribute('href', stylesheetPath);
     /* var link = document.createElement("link");
      link.rel = "stylesheet";
      link.className="theme"
      link.type = "text/css";
      link.href =stylesheetPath;
      document.getElementsByTagName("head")[0].appendChild(link);*/
    }
  };

</script>
<style lang="less" rel="stylesheet/less">
  @name:themeSwitch;
  .@{name}{
    .ivu-dropdown-menu{
      li:nth-child(n+6) {
        display: none;
      }
    }
  }
.ivu-dropdown-item:hover{
   background-color: #e2e2e2;
}
</style>
